<template>
  <div class="app-container">
    <div>
      <h4 style="margin:0 0 1.25rem 0">
        <el-tag type="info">查询条件</el-tag>
      </h4>
      <el-form ref="form" :model="form" label-width="6.25rem" style="display:flex;flex-wrap:wrap;">
        <el-form-item class="form-item" style="font-size: 0.75rem;height: 1.9rem;" label="订单号">
          <el-input v-model="form.order_id" placeholder="请填写订单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="渠道">
          <template slot-scope="scope">
            <el-select v-model="form.plat_id" clearable>
              <el-option v-for="item in platIdList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="form.receiver" placeholder="请填写收货人" clearable></el-input>
        </el-form-item>
        <el-form-item label="收货电话">
          <el-input v-model="form.mobile" placeholder="请填写收货电话" clearable></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <template slot-scope="scope">
            <el-select v-model="form.order_status" clearable>
              <el-option v-for="item in orderStatusList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="是否开票">
          <template slot-scope="scope">
            <el-select v-model="form.is_invoice" clearable>
              <el-option v-for="item in isInvoiceList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker v-model="form.gmt_create" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="付款时间">
          <el-date-picker v-model="form.gmt_pay" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
        </el-form-item>
      </el-form>
      <div class="bfc">
        <el-button class="btn" @click="reset" type="primary">重  置</el-button>
        <el-button class="btn" @click="search" type="primary">查  询</el-button>
        <el-button class="btn" @click="exportList" type="primary">导出列表</el-button>
        <el-button class="btn" @click="importInfo" type="primary">导入物流信息</el-button>
      </div>
    </div>
    <div>
      <h4 style="margin:0 0 1.25rem 0">
        <el-tag type="info">基本列表</el-tag>
      </h4>
      <el-table :data="baseList" border style="width: 100%" tooltip-effect="dark">
        <el-table-column type="index" :index="indexMethod" label="序号" width="50" fixed="left">
        </el-table-column>
        <el-table-column prop="order_id" label="订单号" min-width="100" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="plat_name" label="渠道" min-width="100" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="price" label="单价" min-width="80" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="quantity" label="数量" min-width="80" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="total_amount" label="订单金额" min-width="80" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="device_type" label="设备类型" min-width="100" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="order_status" label="订单状态" min-width="100" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="receiver" label="收货人" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="mobile" label="收货电话" min-width="120" show-overflow-tooltip >
        </el-table-column>
        <el-table-column prop="gmt_create" label="下单时间" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="gmt_pay" label="付款时间" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="gmt_refund" label="退款时间" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="订单详情" min-width="80" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" style="text-align: center" @click="lookView(scope.row)" plain><span class=" iconfont hhtx-chakan"></span></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination class="page-num" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="perPageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalListNum">
        </el-pagination>
      </div>
    </div>
    <!-- 详情 -->
    <div class="dialog" v-if="isDetailShow">
      <div class="dialog-box">
        <el-tabs >
          <el-tab-pane label="订单详情" >
            <div class="content" style="overflow-y: auto;">
              <el-form ref="orderForm" :model="orderForm" :rules="orderRules" label-width="5rem" style="display:flex;flex-wrap:wrap;">
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="订单号">
                  <div style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.order_id}}</div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="单价">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.price}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="数量">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.quantity}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="订单金额">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.total_amount}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="订单状态">
                  <template slot-scope="scope">
                    <el-select :disabled='orderIsDisabled' v-model="itemDetail.order_status" clearable>
                      <el-option v-for="item in orderStatusList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" prop="device_type" style="width: 22rem;height: 1.9rem;" label="设备类型">
                  <div class="bfc">
                    <el-input :disabled='orderIsDisabled' v-model="orderForm.device_type" placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="设备编号">
                  <div class="bfc">
                    <el-input :disabled='orderIsDisabled' v-model="itemDetail.device_sn" placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="创建时间">
                <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.gmt_create}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="更新时间">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.gmt_modified}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="付款时间">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.gmt_pay}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="退款时间">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.gmt_refund}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="是否开票">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.is_invoice}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="发票抬头">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.invoice_title}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" prop="express_corp" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" label="快递名称">
                  <div class="bfc">
                    <el-input v-model="orderForm.express_corp" :disabled='orderIsDisabled' placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" prop="express_no" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" label="快递编号">
                  <div class="bfc">
                    <el-input v-model="orderForm.express_no" :disabled='orderIsDisabled' placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="发货时间">
                  <template>
                    <div class="bfc">
                      <el-date-picker
                        v-model="itemDetail.gmt_ship"
                        type="datetime"
                        :disabled='orderIsDisabled'
                        placeholder="请选择发货时间">
                      </el-date-picker>
                    </div>
                  </template>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="收货人">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.receiver}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="收货电话">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.mobile}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="收货地址">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.address}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" prop="remark" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" label="备注">
                  <div class="bfc">
                    <el-input v-model="orderForm.remark" :disabled='orderIsDisabled' placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <div style="margin-top: 1.25rem">
              <el-button class="btn" @click="close" type="primary">关闭</el-button>
              <el-button class="btn" @click="saveInfo('orderForm')" type="primary" :disabled='orderSaveBtnDisabled'>保存</el-button>
              <el-button class="btn" @click="modified" type="primary" :disabled='orderModifyBtnDisabled'>更改</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="dialog-import" v-if="isImportShow">
      <div class="dialog-import-box">
        <div class="content-import" >
          <h4 style="margin:0 0 0.94rem 0">
            <el-tag>导入物流信息</el-tag>
          </h4>
          <el-form :model="ruleForm" ref="ruleForm"  label-width="1rem">
            <el-form-item>
              <el-upload
                v-loading.fullscreen.lock="fullscreenLoading"
                ref="upload"
                :headers="aaaheader"
                class="upload-demo"
                name="file"
                :action="url"
                multiple
                accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                :before-upload="beforeAvatarUpload"
                :limit="1"
                :on-exceed="handleExceed"
                :data='token'
                :on-error="uploadError"
                :on-success="uploadSuccess"
                :auto-upload="false"
                :on-change="handleChange"
                :before-remove="beforeRemove"
                :file-list="fileList">
                <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
                <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <div style="margin-top: 4rem">
          <el-button class="btn" @click="closeImport" type="primary">关闭</el-button>
          <el-button class="btn" size="small" type="primary" @click="submitUpload">确认上传</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getToken } from '@/utils/auth'
  import { getList,getListDetail,exportList,updateOrderDetail} from '@/api/xlbOrders'
  import { queryDict } from '@/api/queryDict'
  export default {
    data(){
      return{
        orderStatusList: [],
        platIdList: [],
        isInvoiceList: [],
        form: {
          order_id: '',
          plat_id: '',
          receiver: '',
          mobile: '',
          order_status: '',
          is_invoice: ''
        },
        baseList: [],
        currentPage: 1,
        isImportShow: false,
        isDetailShow: false,
        orderIsDisabled: true,
        orderSaveBtnDisabled: true,
        orderModifyBtnDisabled: false,
        perPageNum: 10,
        totalListNum: 0,
        itemDetail: {},
        fullscreenLoading:false,
        orderForm: {
          device_type: '',
          express_corp: '',
          express_no: '',
          remark: ''
        },
        orderRules: {
          device_type: [
            {  max: 16, message: '长度不多于16个字符', trigger: 'blur' }
          ],
          express_corp: [
            {  max: 32, message: '长度不多于32个字符', trigger: 'blur' }
          ],
          express_no: [
            {  max: 32, message: '长度不多于32个字符', trigger: 'blur' }
          ],
          remark: [
            {  max: 255, message: '长度不多于255个字符', trigger: 'blur' }
          ],
        },
        aaaheader:{
          'Authorization': getToken()
        },
        ruleForm: {
          name: '上传Form',
          isShow: '0'
        },
        fileList:[],
        token:{
          accessToken:''
        },
        url: process.env.BASE_API+'/api/isp/manager/xlb/order/import'
        // url: '/api'
      }
    },
    created() {
      this.queryXlbOrderStatus()
      this.queryIsInvoice()
      this.queryPlatType()
      this.fetchData()
    },
    methods: {
      aaa(val){
        return new Date(val)
      },
      queryIsInvoice() {
        const params = {
          'group_id': 'IS_INVOICE_FLAG',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.isInvoiceList = res.data ? res.data : []
        }).catch(er => { })
      },
      queryXlbOrderStatus() {
        const params = {
          'group_id': 'XLB_ORDER_STATUS',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.orderStatusList = res.data ? res.data : []
        }).catch(er => { })
      },
      queryPlatType() {
        const params = {
          'group_id': 'PLAT_TYPE',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.platIdList = res.data ? res.data : []
        }).catch(er => { })
      },
      fetchData() {
        const params = {
          'page': this.currentPage,
          'per_num': this.perPageNum,
          'order_id': this.form.order_id,
          'plat_id': this.form.plat_id,
          'receiver': this.form.receiver,
          'mobile': this.form.mobile,
          'order_status': this.form.order_status,
          'is_invoice': this.form.is_invoice,
          'gmt_create_end': this.form.gmt_create === undefined ? '':this.form.gmt_create === null ? '':this.form.gmt_create[1] === '' ? '' : this.praseDate((this.form.gmt_create)[1]),
          'gmt_create_start': this.form.gmt_create === undefined ? '':this.form.gmt_create === null ? '':this.form.gmt_create[0] === '' ? '' : this.praseDate((this.form.gmt_create)[0]),
          'gmt_pay_end': this.form.gmt_pay === undefined ? '':this.form.gmt_pay === null ? '':this.form.gmt_pay[1] === '' ? '' : this.praseDate((this.form.gmt_pay)[1]),
          'gmt_pay_start': this.form.gmt_pay === undefined ? '':this.form.gmt_pay === null ? '':this.form.gmt_pay[0] === '' ? '' : this.praseDate((this.form.gmt_pay)[0])
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        getList(params).then(res => {
          const data = res.data
          this.baseList = data ? data.result_list : []
          this.totalListNum = data ? data.total : 0
        }).catch(er => { })
        loading.close()
      },
      reset() {
        this.form = {}
        this.currentPage = 1
        this.perPageNum = 10
        this.fetchData()
      },
      modified() {
        this.orderIsDisabled = false
        this.orderModifyBtnDisabled = true
      },
      alterOrder() {
        const params = {
          'device_sn': this.itemDetail.device_sn,
          'device_type': this.orderForm.device_type,
          'express_corp': this.orderForm.express_corp,
          'express_no': this.orderForm.express_no,
          'gmt_ship': this.FormatAllDate(this.itemDetail.gmt_ship),
          'order_id': this.itemDetail.order_id,
          'order_status': this.itemDetail.order_status,
          'remark': this.orderForm.remark,
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        updateOrderDetail(params).then(res => {
          const data = res.code
          if (data === '0000') {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.orderIsDisabled = true
            this.orderModifyBtnDisabled = false
            this.orderSaveBtnDisabled = true
            this.fetchData()
            const orderIdParams = {
              'order_id': this.itemDetail.order_id
            }
            this.getOrderDetail(orderIdParams)
          } else {
            this.$message.error('更新失败，请重试！')
          }
        }).catch(er => { })
        loading.close()
      },
      exportList() {
        const params = {
          'order_id': this.form.order_id,
          'plat_id': this.form.plat_id,
          'receiver': this.form.receiver,
          'mobile': this.form.mobile,
          'order_status': this.form.order_status,
          'is_invoice': this.form.is_invoice,
          'gmt_create_end': this.form.gmt_create === undefined ? '':this.form.gmt_create === null ? '':this.form.gmt_create[1] === '' ? '' : this.praseDate((this.form.gmt_create)[1]),
          'gmt_create_start': this.form.gmt_create === undefined ? '':this.form.gmt_create === null ? '':this.form.gmt_create[0] === '' ? '' : this.praseDate((this.form.gmt_create)[0]),
          'gmt_pay_end': this.form.gmt_pay === undefined ? '':this.form.gmt_pay === null ? '':this.form.gmt_pay[1] === '' ? '' : this.praseDate((this.form.gmt_pay)[1]),
          'gmt_pay_start': this.form.gmt_pay === undefined ? '':this.form.gmt_pay === null ? '':this.form.gmt_pay[0] === '' ? '' : this.praseDate((this.form.gmt_pay)[0])
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        exportList(params).then(res => {
          const data = res.data
          if(data === null){
            this.$message.error(res.message)
          } else {
            this.downloadUrl = data.download_url
            window.location.href = this.downloadUrl
          }
        }).catch(er => {
          this.$message.error('导出失败，请重试！')
        })
        loading.close()
      },
      importInfo(){
        this.isImportShow = true
      },
      modified() {
        this.orderIsDisabled = false
        this.orderSaveBtnDisabled = false
        this.orderModifyBtnDisabled = true
      },
      praseDate(date) {
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        return year + '-' + month + '-' + day
      },
      search() {
        this.currentPage = 1
        this.fetchData()
      },
      close() {
        if(this.orderIsDisabled === false || this.idCardIsDisabled === false || this.vehicleIsDisabled === false ){
          this.$confirm('您有未保存的改动, 是否继续关闭?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.isDetailShow = !this.isDetailShow
            this.itemDetail={}
            this.orderIsDisabled = true
            this.orderSaveBtnDisabled = true
            this.orderModifyBtnDisabled = false
          }).catch(() => {
          });
        } else{
          this.isDetailShow = !this.isDetailShow
          this.itemDetail={}
          this.orderIsDisabled = true
        }
      },
      saveInfo(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.alterOrder()
          } else {
            return false;
          }
        })
      },
      lookView(row) {
        this.isDetailShow = !this.isDetailShow
        const params = {
          'order_id': row['order_id']
        }
        this.getOrderDetail(params)
      },
      getOrderDetail(params){
        getListDetail(params).then(res => {
          // let abc = res.data.map((item) => {
          //   item.gmt_ship = new Date(item.gmt_ship)
          //   return item
          // })
          let abcd = res.data
          abcd.gmt_ship = new Date(res.data.gmt_ship)
          this.itemDetail = Object.assign({}, abcd)
          this.orderForm.device_type = this.itemDetail.device_type
          this.orderForm.express_corp = this.itemDetail.express_corp
          this.orderForm.express_no = this.itemDetail.express_no
          this.orderForm.remark = this.itemDetail.remark
        }).catch(errInfo => { })
        // this.$nextTick(() => {
        //   this.forceUpdate()
        // })
      },
      indexMethod(index) {
        return index + (this.currentPage - 1) * this.perPageNum + 1
      },
      handleSizeChange(val) {
        this.perPageNum = val
        this.currentPage = 1
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.fetchData()
      },
      isVehicleNumber(value) {
        var result = false;
        var xreg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
        var creg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
        if(value.length == 7){
          result = creg.test(value);
        } else if(value.length == 8){
          result = xreg.test(value);
        }
        if(value!=null&&value!=''&&result === false){
          this.$message.error('车牌号输入不合法！')
        }
      },
      isCardNo(value){
        // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if(value!=null&&value!=''&&reg.test(value) === false)
        {
          this.$message.error("身份证输入不合法！")
        }
      },
      FormatAllDate(sDate) {
        var date = new Date(sDate);
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        //月
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        //日
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        //时
        if (hours >= 0 && hours <= 9) {
          hours = "0" + hours;
        }
        //分
        if (minutes >= 0 && minutes <= 9) {
          minutes = "0" + minutes;
        }
        //秒
        if (seconds >= 0 && seconds <= 9) {
          seconds = "0" + seconds;
        }
        //格式化后日期为：yyyy-MM-dd HH:mm:ss
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
          + " " + hours + seperator2 + minutes + seperator2 + seconds;
        return currentdate;
      },
      closeImport(file){
        if(this.fileList.length!=0) {
          this.$confirm(`有未上传的文件，确认关闭？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.isImportShow = false
            this.fileList = [];
            // 清空上传列表
            this.$refs.upload.clearFiles();
            return true
          }).catch(() => {
          });
          return false
        }
        this.isImportShow = false
        this.fileList = [];
        // 清空上传列表
        this.$refs.upload.clearFiles();
      },
      beforeAvatarUpload(file) {
        /*let Xls = file.name.split('.');
        if(Xls[1] === 'xls'||Xls[1] === 'xlsx'){
          return file
        }else {
          this.$message.error('上传文件只能是 xls/xlsx 格式!')
          return false
        }*/
      },
      handleExceed(files, fileList) {
        this.$message.warning(`一次仅可上传1个文件`);
      },
      /*handleRemove(file, fileList){
        console.log('进入handleRemove')
        this.fileList = fileList;
      },*/
      handleChange(file, fileList) {
        let Xls = file.name.split('.');
        if(Xls[1] === 'xls'||Xls[1] === 'xlsx'){
          this.fileList = fileList;
          // return file
        }else {
          this.$message.error('上传文件只能是 xls/xlsx 格式!')
          this.fileList = [];
          // 清空上传列表
          this.$refs.upload.clearFiles();
          return false
        }
      },
      beforeRemove(file, fileList) {
        this.$confirm(`确定移除 ${ file.name }？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.fileList = [];
          // 清空上传列表
          this.$refs.upload.clearFiles();
          return true
        }).catch(() => {
        });
        return false
      },
      uploadError(err, file, fileList) {
        // 上传失败
        this.fullscreenLoading = false
        this.$message.error(err.message);
        this.resetImport();
      },
      uploadSuccess(response, file, fileList) {
        this.fullscreenLoading = false
        // 上传成功
        if(response.code==='0000'){
          this.$message({
            message: response.message,
            type: 'success'
          });
        }else {
          this.$message({
            // message: '文件上传失败！请检查文件格式稍后重试！',
            message: response.message,
            type: 'error'
          });
        }
        this.resetImport();
      },
      submitUpload() {
        // console.log(`fileList:${this.fileList.length}`)
        if(this.fileList.length===0){
          this.$message({
            // message: '文件上传失败！请检查文件格式稍后重试！',
            message: '请选择文件！',
            type: 'error'
          });
          return
        }
        this.fullscreenLoading = true
        this.$refs.upload.submit();
      },
      resetImport() {
        // 重置
        // 清空多选框
        this.fileList = [];
        // 清空上传列表
        this.$refs.upload.clearFiles();
      }
    }
  }

</script>

<style lang="scss" scoped>
  .bfc {
    overflow: hidden;
  }
  .btn {
    float: right;
    margin: 0 0.9rem;
  }
  .form-item{
    font-size: 0.75rem;
  }
  .form-item-dialog-id{
    margin-top: 0.4rem;
  }
  .page-num {
    float: right;
  }
  .content {
    height: 24rem;
  }
  .content-import {
      height: 8rem;
    }
  .dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    &-box {
      width: 55%;
      height: 32rem;
      background-color: #fff;
      padding: 0.5rem 1rem;
    }
  }
  .dialog-import {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
      background-color: rgba(0, 0, 0, 0.25);
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      align-items: center;
      &-box {
        width: 30%;
        height: 18rem;
        background-color: #fff;
        padding: 1rem 1rem;
      }
    }
  .el-upload__tip{
    margin-top: -0.5rem;
  }
</style>
